<script setup>
import { computed, onMounted, ref, watch } from "vue";
import { loginOut } from "../../services/login";
import { tokenStatisticsAll } from "../../services/chat";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();
const url = ref(router.currentRoute.value.path);

watch(route, (to, from) => {
  console.log(to.path, from.path);
  // 当从 /main/owner/ownerinfo 返回到 /main/owner 时，将 isShowowner 设置为 true
  if (to.path == "/main/owner") {
    isShowowner.value = true;
  }
});
//头像
const userData = ref(JSON.parse(localStorage.getItem("userData")));
//统计
const statisticsInfo = ref({
  tokens: "0",
  paintNum: "0",
  creativeNum: "0",
});
const tokenStatistics = () => {
  tokenStatisticsAll()
    .then((res) => {
      statisticsInfo.value = res.data;
    })
    .catch((err) => {});
};
//退出登录
const userLoginOut = () => {
  if (userData.value == null) {
    showNotify({
      color: "#ad0000",
      background: "#ffe1e1",
      type: "danger",
      message: "用户未登录！",
    });
    return;
  }
  showConfirmDialog({
    title: "标题",
    message: "退出登录？",
  })
    .then(() => {
      loginOut()
        .then((res) => {
          localStorage.removeItem("Authorization");
          localStorage.removeItem("userData");
          userData.value = null;
          statisticsInfo.value = {
            tokens: "0",
            paintNum: "0",
            creativeNum: "0",
          };
        })
        .catch((error) => {});
    })
    .catch(() => {});
};
//路由跳转
const isShowowner = ref(true);
const toSetting = () => {
  isShowowner.value = false;
  router.push("/main/owner/ownerInfo");
};
//未开发功能
const exploit = () => {
  showFailToast("功能开发中");
};
onMounted(() => {
  tokenStatistics();
});
</script>
<template>
  <div class="owner" v-if="isShowowner">
    <div class="top_owner">
      <div class="content">
        <van-image
          round
          width="5rem"
          height="5rem"
          :src="
            userData == null
              ? 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
              : userData.headPic
          "
        />
        <span class="user-name">
          {{ userData == null ? "未登录" : userData.fullName }}</span
        >
      </div>
      <van-icon name="setting-o" size="35" @click="toSetting" />
    </div>
    <div class="bottom_owner">
      <div class="white-box" id="white-box">
        <van-grid :border="false" :column-num="3" :gutter="10">
          <van-grid-item>
            <span class="tokens_span" v-if="statisticsInfo.tokens > 99999999"
              >9999999<sup>+</sup>
            </span>
            <span class="tokens_span" v-else>{{ statisticsInfo.tokens }}</span>
            <span class="font_span">聊天用量</span>
          </van-grid-item>
          <van-grid-item>
            <span class="tokens_span">{{ statisticsInfo.paintNum }}</span>
            <span class="font_span">绘画使用数</span>
          </van-grid-item>
          <van-grid-item>
            <span class="tokens_span">{{ statisticsInfo.creativeNum }}</span>
            <span class="font_span">创意字用量</span>
          </van-grid-item>
        </van-grid>
      </div>
      <div class="other">
        <div class="other_cell">
          <van-cell center is-link @click="exploit" :border="false" title="消息通知">
            <template #icon>
              <van-icon name="other-pay" />
            </template>
          </van-cell>
          <van-cell title="意见反馈" is-link @click="exploit" :border="false">
            <template #icon>
              <van-icon name="envelop-o" />
            </template>
          </van-cell>
          <van-cell title="创意字背景设置" is-link @click="exploit" :border="false">
            <template #icon>
              <van-icon name="font-o" />
            </template>
          </van-cell>
        </div>
      </div>
      <div class="logout">
        <span class="logout_span" @click="userLoginOut">退出登录</span>
      </div>
    </div>
  </div>
  <router-view></router-view>
  <!-- 显示子路由内容 -->
</template>

<style lang="less" scoped>
.owner {
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .top_owner {
    position: relative;
    display: flex;
    height: 20%;
    background-image: radial-gradient(circle, rgb(219, 251, 251), rgb(209, 223, 249));
    z-index: 1;
    .content {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 80%;
      position: absolute;
      margin-left: 20px;
      z-index: 1;
      .van-image {
        flex-shrink: 0; /* 防止图片缩小 */
      }
      .user-name {
        flex-grow: 1; /* 占据剩余空间 */
        margin-left: 20px;
        font-size: 30px;
        color: rgb(102, 102, 102);
        white-space: nowrap; /* 防止文本换行 */
        overflow: hidden;
        text-overflow: ellipsis; /* 处理溢出文本 */
      }
    }
    .van-icon {
      flex-shrink: 0; /* 防止图标缩小 */
      position: absolute;
      top: 10px; /* 调整这个值来设置与顶部的距离 */
      right: 10px; /* 调整这个值来设置与右边的距离 */
    }
  }
  .bottom_owner {
    height: 80%;
    position: relative;
    background-color: rgb(244, 247, 252);
    .white-box {
      position: absolute;
      top: -6%; /* 向上移动20%，使其与top_owner重叠 */
      width: 85%;
      height: 20%; /* 白色框占用的高度 */
      background-color: white;
      left: 50%;
      transform: translateX(-50%); /* 水平居中 */
      justify-content: center;
      border-radius: 25px; /* 如果需要圆角，可以设置 */
      z-index: 2; /* 确保在bottom_owner之下 */
      .van-grid {
        height: 100%;
        align-content: center;
        justify-content: center;
        .font_span {
          font-size: 13px;
          color: #827979;
        }
        .tokens_span {
          display: block;
          margin-bottom: 3px;
        }
      }
    }
    .other {
      position: absolute;
      top: 18%; /* 相对于white-box底部向下移动10% */
      left: 50%;
      transform: translateX(-50%);
      width: 85%; /* 或根据需要调整宽度 */
      height: 30%; /* 或根据需要调整高度 */
      border-radius: 25px; /* 如果需要圆角，可以设置 */
      background-color: rgb(255, 255, 255); /* 示例背景色 */
      .other_cell {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .van-cell {
          height: 26%;
          font-size: 16px;
          color: #494545;
          .van-icon {
            margin-right: 10px; /* 调整图标与标题之间的间距 */
            color: #2b2222;
            size: 35px;
            font-size: 28px;
          }
        }
      }
    }
    .logout {
      position: absolute;
      top: 52%; /* 相对于white-box底部向下移动10% */
      left: 50%;
      transform: translateX(-50%);
      width: 85%; /* 或根据需要调整宽度 */
      height: 8%; /* 或根据需要调整高度 */
      border-radius: 25px; /* 如果需要圆角，可以设置 */
      background-color: rgb(255, 255, 255); /* 示例背景色 */
      .logout_span {
        height: 100%;
        display: flex;
        justify-content: center; /* 水平居中 */
        align-items: center; /* 垂直居中 */
        color: #827979;
      }
    }
  }
}
</style>
